<!--
  智慧社区管理系统 - 车辆管理 (静态展示页面)
  @author Wu.Liang
  @date 2024-01-01
-->
<template>
    <div class="vehicle-container">
        <!-- 页面标题 -->
        <el-card class="title-card">
            <div class="page-header">
                <h2>🚙 车辆管理</h2>
                <p class="page-description">管理社区内所有车辆信息，包括车辆登记、车主信息、车位分配等功能</p>
            </div>
        </el-card>

        <!-- 搜索区域 -->
        <el-card class="search-card">
            <el-form :model="searchForm" inline>
                <el-form-item label="车牌号">
                    <el-input v-model="searchForm.licensePlate" placeholder="请输入车牌号" clearable />
                </el-form-item>
                <el-form-item label="车主姓名">
                    <el-input v-model="searchForm.ownerName" placeholder="请输入车主姓名" clearable />
                </el-form-item>
                <el-form-item label="车辆类型">
                    <el-select v-model="searchForm.vehicleType" placeholder="请选择车辆类型" clearable>
                        <el-option label="小型车" :value="1" />
                        <el-option label="中型车" :value="2" />
                        <el-option label="大型车" :value="3" />
                        <el-option label="新能源车" :value="4" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                        <el-option label="正常" :value="1" />
                        <el-option label="停用" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 统计信息卡片 -->
        <el-row :gutter="20" class="stats-row">
            <el-col :span="6">
                <el-card class="stats-card">
                    <div class="stats-content">
                        <div class="stats-icon success">
                            <el-icon><CircleCheck /></el-icon>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ stats.total }}</div>
                            <div class="stats-label">总车辆数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="stats-card">
                    <div class="stats-content">
                        <div class="stats-icon primary">
                            <el-icon><CircleCheck /></el-icon>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ stats.active }}</div>
                            <div class="stats-label">正常车辆</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="stats-card">
                    <div class="stats-content">
                        <div class="stats-icon warning">
                            <el-icon><Warning /></el-icon>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ stats.inactive }}</div>
                            <div class="stats-label">停用车辆</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="stats-card">
                    <div class="stats-content">
                        <div class="stats-icon info">
                            <el-icon><Lightning /></el-icon>
                        </div>
                        <div class="stats-info">
                            <div class="stats-number">{{ stats.newEnergy }}</div>
                            <div class="stats-label">新能源车</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 操作区域 -->
        <el-card class="operation-card">
            <el-button type="primary" @click="handleAdd">添加车辆</el-button>
            <el-button type="success" @click="handleBatchImport">批量导入</el-button>
            <el-button type="warning" @click="handleRefresh">刷新</el-button>
            <el-button type="info" @click="handleExport">导出数据</el-button>
        </el-card>

        <!-- 数据表格 -->
        <el-card class="table-card">
            <el-table :data="filteredTableData" border v-loading="loading" stripe>
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="licensePlate" label="车牌号" width="120" />
                <el-table-column prop="ownerName" label="车主姓名" width="100" />
                <el-table-column prop="phone" label="联系电话" width="120" />
                <el-table-column prop="vehicleTypeName" label="车辆类型" width="100" />
                <el-table-column prop="brand" label="品牌型号" width="120" />
                <el-table-column prop="color" label="车身颜色" width="80" />
                <el-table-column prop="spaceNo" label="分配车位" width="100" />
                <el-table-column prop="statusName" label="状态" width="80">
                    <template #default="{ row }">
                        <el-tag :type="getStatusType(row.status)">{{ row.statusName }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="registerTime" label="登记时间" width="180" />
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
                        <el-button type="success" size="small" @click="handleAssignSpace(row)" v-if="!row.spaceNo">分配车位</el-button>
                        <el-button type="warning" size="small" @click="handleViewDetails(row)">详情</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="pagination.current"
                    v-model:page-size="pagination.size"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>

        <!-- 添加/编辑对话框 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="600px"
            @close="handleDialogClose"
        >
            <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="车牌号" prop="licensePlate">
                            <el-input v-model="form.licensePlate" placeholder="请输入车牌号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车主姓名" prop="ownerName">
                            <el-input v-model="form.ownerName" placeholder="请输入车主姓名" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="phone">
                            <el-input 
                                v-model="form.phone" 
                                placeholder="请输入手机号码" 
                                maxlength="11"
                                show-word-limit
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证号" prop="idCard">
                            <el-input v-model="form.idCard" placeholder="请输入身份证号" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="车辆类型" prop="vehicleType">
                            <el-select v-model="form.vehicleType" placeholder="请选择车辆类型" style="width: 100%">
                                <el-option label="小型车" :value="1" />
                                <el-option label="中型车" :value="2" />
                                <el-option label="大型车" :value="3" />
                                <el-option label="新能源车" :value="4" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车身颜色" prop="color">
                            <el-select v-model="form.color" placeholder="请选择车身颜色" style="width: 100%">
                                <el-option label="白色" value="白色" />
                                <el-option label="黑色" value="黑色" />
                                <el-option label="红色" value="红色" />
                                <el-option label="蓝色" value="蓝色" />
                                <el-option label="银色" value="银色" />
                                <el-option label="灰色" value="灰色" />
                                <el-option label="其他" value="其他" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="品牌型号" prop="brand">
                            <el-input v-model="form.brand" placeholder="请输入品牌型号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
                                <el-option label="正常" :value="1" />
                                <el-option label="停用" :value="0" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入备注信息" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
            </template>
        </el-dialog>

        <!-- 分配车位对话框 -->
        <el-dialog
            v-model="assignDialogVisible"
            title="分配车位"
            width="500px"
        >
            <el-form :model="assignForm" :rules="assignRules" ref="assignFormRef" label-width="100px">
                <el-form-item label="车辆信息">
                    <el-input :value="assignForm.vehicleInfo" disabled />
                </el-form-item>
                <el-form-item label="选择车位" prop="spaceId">
                    <el-select v-model="assignForm.spaceId" placeholder="请选择车位" style="width: 100%">
                        <el-option
                            v-for="space in availableSpaces"
                            :key="space.id"
                            :label="`${space.spaceNo} (${space.lotName})`"
                            :value="space.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="分配备注" prop="remark">
                    <el-input v-model="assignForm.remark" type="textarea" placeholder="请输入分配备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="assignDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAssignSubmit" :loading="submitLoading">确定</el-button>
            </template>
        </el-dialog>

        <!-- 车辆详情对话框 -->
        <el-dialog
            v-model="detailsDialogVisible"
            title="车辆详情"
            width="700px"
        >
            <el-descriptions :column="2" border>
                <el-descriptions-item label="车牌号">{{ selectedVehicle.licensePlate }}</el-descriptions-item>
                <el-descriptions-item label="车主姓名">{{ selectedVehicle.ownerName }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ selectedVehicle.phone }}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{ selectedVehicle.idCard }}</el-descriptions-item>
                <el-descriptions-item label="车辆类型">{{ selectedVehicle.vehicleTypeName }}</el-descriptions-item>
                <el-descriptions-item label="车身颜色">{{ selectedVehicle.color }}</el-descriptions-item>
                <el-descriptions-item label="品牌型号">{{ selectedVehicle.brand }}</el-descriptions-item>
                <el-descriptions-item label="分配车位">{{ selectedVehicle.spaceNo || '未分配' }}</el-descriptions-item>
                <el-descriptions-item label="状态">
                    <el-tag :type="getStatusType(selectedVehicle.status)">{{ selectedVehicle.statusName }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="登记时间">{{ selectedVehicle.registerTime }}</el-descriptions-item>
                <el-descriptions-item label="备注" :span="2">{{ selectedVehicle.remark || '无' }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { validators } from '@/utils/validate'
import { CircleCheck, Warning, Lightning } from '@element-plus/icons-vue'
import { showSuccess, showError } from '@/utils/message'

// 响应式数据
const loading = ref(false)
const submitLoading = ref(false)
const dialogVisible = ref(false)
const assignDialogVisible = ref(false)
const detailsDialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref<FormInstance>()
const assignFormRef = ref<FormInstance>()

// 静态数据 - 车辆列表
const tableData = ref([
    {
        id: 1,
        licensePlate: '京A12345',
        ownerName: '张三',
        phone: '13800138001',
        idCard: '110101199001011234',
        vehicleType: 1,
        vehicleTypeName: '小型车',
        brand: '大众朗逸',
        color: '白色',
        spaceNo: 'A-002',
        status: 1,
        statusName: '正常',
        registerTime: '2024-01-15 10:30:00',
        remark: '业主车辆'
    },
    {
        id: 2,
        licensePlate: '京B67890',
        ownerName: '李四',
        phone: '13800138002',
        idCard: '110101199002022345',
        vehicleType: 3,
        vehicleTypeName: '大型车',
        brand: '奔驰GLC',
        color: '黑色',
        spaceNo: 'A-004',
        status: 1,
        statusName: '正常',
        registerTime: '2024-01-15 11:00:00',
        remark: 'SUV车型'
    },
    {
        id: 3,
        licensePlate: '京C11111',
        ownerName: '王五',
        phone: '13800138003',
        idCard: '110101199003033456',
        vehicleType: 4,
        vehicleTypeName: '新能源车',
        brand: '特斯拉Model 3',
        color: '红色',
        spaceNo: 'C-002',
        status: 1,
        statusName: '正常',
        registerTime: '2024-01-15 11:30:00',
        remark: '纯电动车型'
    },
    {
        id: 4,
        licensePlate: '京C22222',
        ownerName: '赵六',
        phone: '13800138004',
        idCard: '110101199004044567',
        vehicleType: 2,
        vehicleTypeName: '中型车',
        brand: '丰田凯美瑞',
        color: '银色',
        spaceNo: 'C-001',
        status: 1,
        statusName: '正常',
        registerTime: '2024-01-15 12:00:00',
        remark: ''
    },
    {
        id: 5,
        licensePlate: '京V33333',
        ownerName: '访客',
        phone: '13900139001',
        idCard: '110101199005055678',
        vehicleType: 1,
        vehicleTypeName: '小型车',
        brand: '本田雅阁',
        color: '蓝色',
        spaceNo: 'V-002',
        status: 1,
        statusName: '正常',
        registerTime: '2024-01-15 12:30:00',
        remark: '临时访客车辆'
    },
    {
        id: 6,
        licensePlate: '京A55555',
        ownerName: '钱七',
        phone: '13800138005',
        idCard: '110101199006066789',
        vehicleType: 1,
        vehicleTypeName: '小型车',
        brand: '日产轩逸',
        color: '灰色',
        spaceNo: '',
        status: 0,
        statusName: '停用',
        registerTime: '2024-01-15 13:00:00',
        remark: '车辆维修中'
    },
    {
        id: 7,
        licensePlate: '京B88888',
        ownerName: '孙八',
        phone: '13800138006',
        idCard: '110101199007077890',
        vehicleType: 4,
        vehicleTypeName: '新能源车',
        brand: '比亚迪汉',
        color: '白色',
        spaceNo: '',
        status: 1,
        statusName: '正常',
        registerTime: '2024-01-15 13:30:00',
        remark: '插电混动'
    },
    {
        id: 8,
        licensePlate: '京C99999',
        ownerName: '周九',
        phone: '13800138007',
        idCard: '110101199008088901',
        vehicleType: 2,
        vehicleTypeName: '中型车',
        brand: '奥迪A4L',
        color: '黑色',
        spaceNo: '',
        status: 1,
        statusName: '正常',
        registerTime: '2024-01-15 14:00:00',
        remark: ''
    }
])

// 可用车位列表
const availableSpaces = ref([
    { id: 1, spaceNo: 'A-001', lotName: 'A区地下停车场' },
    { id: 3, spaceNo: 'A-003', lotName: 'A区地下停车场' },
    { id: 5, spaceNo: 'B-001', lotName: 'B区地面停车场' },
    { id: 9, spaceNo: 'V-001', lotName: '访客专用停车场' }
])

// 选中的车辆详情
const selectedVehicle = ref({})

// 统计信息
const stats = computed(() => {
    const total = tableData.value.length
    const active = tableData.value.filter(item => item.status === 1).length
    const inactive = tableData.value.filter(item => item.status === 0).length
    const newEnergy = tableData.value.filter(item => item.vehicleType === 4).length
    
    return { total, active, inactive, newEnergy }
})

// 分页
const pagination = reactive({
    current: 1,
    size: 10,
    total: 0
})

// 搜索表单
const searchForm = reactive({
    licensePlate: '',
    ownerName: '',
    vehicleType: null,
    status: null
})

// 表单数据
const form = reactive({
    id: null,
    licensePlate: '',
    ownerName: '',
    phone: '',
    idCard: '',
    vehicleType: 1,
    brand: '',
    color: '',
    status: 1,
    remark: ''
})

// 分配表单
const assignForm = reactive({
    vehicleId: null,
    vehicleInfo: '',
    spaceId: null,
    remark: ''
})

// 表单验证规则
const rules: FormRules = {
    licensePlate: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
    ownerName: [{ required: true, message: '请输入车主姓名', trigger: 'blur' }],
    phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        validators.mobile('请输入正确的手机号码')
    ],
    idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
    vehicleType: [{ required: true, message: '请选择车辆类型', trigger: 'change' }],
    brand: [{ required: true, message: '请输入品牌型号', trigger: 'blur' }],
    color: [{ required: true, message: '请选择车身颜色', trigger: 'change' }],
    status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const assignRules: FormRules = {
    spaceId: [{ required: true, message: '请选择车位', trigger: 'change' }]
}

// 过滤后的表格数据
const filteredTableData = computed(() => {
    let filtered = [...tableData.value]
    
    if (searchForm.licensePlate) {
        filtered = filtered.filter(item => item.licensePlate.includes(searchForm.licensePlate))
    }
    
    if (searchForm.ownerName) {
        filtered = filtered.filter(item => item.ownerName.includes(searchForm.ownerName))
    }
    
    if (searchForm.vehicleType !== null) {
        filtered = filtered.filter(item => item.vehicleType === searchForm.vehicleType)
    }
    
    if (searchForm.status !== null) {
        filtered = filtered.filter(item => item.status === searchForm.status)
    }
    
    // 更新分页总数
    pagination.total = filtered.length
    
    // 分页处理
    const start = (pagination.current - 1) * pagination.size
    const end = start + pagination.size
    return filtered.slice(start, end)
})

// 获取状态类型
const getStatusType = (status: number) => {
    switch (status) {
        case 1: return 'success'
        case 0: return 'danger'
        default: return 'info'
    }
}

// 搜索
const handleSearch = () => {
    pagination.current = 1
    showSuccess('搜索完成')
}

// 重置
const handleReset = () => {
    Object.assign(searchForm, {
        licensePlate: '',
        ownerName: '',
        vehicleType: null,
        status: null
    })
    pagination.current = 1
    showSuccess('重置完成')
}

// 刷新
const handleRefresh = () => {
    showSuccess('数据已刷新')
}

// 导出数据
const handleExport = () => {
    showSuccess('数据导出功能演示 - 实际开发中会生成Excel文件')
}

// 批量导入
const handleBatchImport = () => {
    showSuccess('批量导入功能演示 - 实际开发中会上传Excel文件')
}

// 添加
const handleAdd = () => {
    dialogTitle.value = '添加车辆'
    Object.assign(form, {
        id: null,
        licensePlate: '',
        ownerName: '',
        phone: '',
        idCard: '',
        vehicleType: 1,
        brand: '',
        color: '',
        status: 1,
        remark: ''
    })
    dialogVisible.value = true
}

// 编辑
const handleEdit = (row: any) => {
    dialogTitle.value = '编辑车辆'
    Object.assign(form, row)
    dialogVisible.value = true
}

// 删除
const handleDelete = async (row: any) => {
    try {
        await ElMessageBox.confirm('确定要删除该车辆吗？', '提示', {
            type: 'warning'
        })
        
        // 模拟删除操作
        const index = tableData.value.findIndex(item => item.id === row.id)
        if (index > -1) {
            tableData.value.splice(index, 1)
            showSuccess('删除成功')
        }
    } catch (error) {
        if (error !== 'cancel') {
            showError('删除失败')
        }
    }
}

// 分配车位
const handleAssignSpace = (row: any) => {
    assignForm.vehicleId = row.id
    assignForm.vehicleInfo = `${row.licensePlate} - ${row.ownerName}`
    assignForm.spaceId = null
    assignForm.remark = ''
    assignDialogVisible.value = true
}

// 查看详情
const handleViewDetails = (row: any) => {
    selectedVehicle.value = { ...row }
    detailsDialogVisible.value = true
}

// 提交表单
const handleSubmit = async () => {
    if (!formRef.value) return
    
    try {
        await formRef.value.validate()
        submitLoading.value = true
        
        // 模拟提交操作
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        if (form.id) {
            // 编辑模式
            const index = tableData.value.findIndex(item => item.id === form.id)
            if (index > -1) {
                Object.assign(tableData.value[index], {
                    ...form,
                    vehicleTypeName: getVehicleTypeName(form.vehicleType),
                    statusName: getStatusName(form.status)
                })
            }
            showSuccess('更新成功')
        } else {
            // 添加模式
            const newId = Math.max(...tableData.value.map(item => item.id)) + 1
            const newVehicle = {
                ...form,
                id: newId,
                vehicleTypeName: getVehicleTypeName(form.vehicleType),
                statusName: getStatusName(form.status),
                spaceNo: '',
                registerTime: new Date().toLocaleString()
            }
            tableData.value.push(newVehicle)
            showSuccess('添加成功')
        }
        
        dialogVisible.value = false
    } catch (error) {
        showError('提交失败')
    } finally {
        submitLoading.value = false
    }
}

// 分配提交
const handleAssignSubmit = async () => {
    if (!assignFormRef.value) return
    
    try {
        await assignFormRef.value.validate()
        submitLoading.value = true
        
        // 模拟分配操作
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        const vehicle = tableData.value.find(item => item.id === assignForm.vehicleId)
        const space = availableSpaces.value.find(item => item.id === assignForm.spaceId)
        
        if (vehicle && space) {
            vehicle.spaceNo = space.spaceNo
            showSuccess('车位分配成功')
        }
        
        assignDialogVisible.value = false
    } catch (error) {
        showError('分配失败')
    } finally {
        submitLoading.value = false
    }
}

// 对话框关闭
const handleDialogClose = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

// 分页大小改变
const handleSizeChange = (size: number) => {
    pagination.size = size
    pagination.current = 1
}

// 当前页改变
const handleCurrentChange = (current: number) => {
    pagination.current = current
}

// 获取车辆类型名称
const getVehicleTypeName = (type: number) => {
    switch (type) {
        case 1: return '小型车'
        case 2: return '中型车'
        case 3: return '大型车'
        case 4: return '新能源车'
        default: return '小型车'
    }
}

// 获取状态名称
const getStatusName = (status: number) => {
    switch (status) {
        case 1: return '正常'
        case 0: return '停用'
        default: return '正常'
    }
}

// 初始化
onMounted(() => {
    pagination.total = tableData.value.length
})
</script>

<style scoped>
.vehicle-container {
    padding: 20px;
}

.title-card {
    margin-bottom: 20px;
}

.page-header {
    text-align: center;
}

.page-header h2 {
    margin: 0 0 10px 0;
    color: #303133;
    font-size: 24px;
}

.page-description {
    margin: 0;
    color: #909399;
    font-size: 14px;
}

.search-card {
    margin-bottom: 20px;
}

.stats-row {
    margin-bottom: 20px;
}

.stats-card {
    height: 100px;
}

.stats-content {
    display: flex;
    align-items: center;
    height: 100%;
}

.stats-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    font-size: 24px;
    color: white;
}

.stats-icon.success {
    background: linear-gradient(135deg, #67c23a, #85ce61);
}

.stats-icon.primary {
    background: linear-gradient(135deg, #409eff, #66b1ff);
}

.stats-icon.warning {
    background: linear-gradient(135deg, #e6a23c, #ebb563);
}

.stats-icon.info {
    background: linear-gradient(135deg, #909399, #c0c4cc);
}

.stats-info {
    flex: 1;
}

.stats-number {
    font-size: 28px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 5px;
}

.stats-label {
    font-size: 14px;
    color: #909399;
}

.operation-card {
    margin-bottom: 20px;
}

.table-card {
    margin-bottom: 20px;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}
</style> 